import React, { Component } from 'react'
import { Carousel, SegmentedControl, Icon } from 'antd-mobile'

const SegmentedControlExample = () => {
  return (
    <div>
      <SegmentedControl
        values={[<div className={`-segment-item`}><Icon type="question" /><span>交易</span></div>, <div className={`-segment-item`}><Icon type="question" /><span>挂单</span></div>]}
      />
      <SegmentedControl
        values={['交易', '盈损']}
        onChange={e => {
          const { nativeEvent: { selectedSegmentIndex} } = e
          console.log(selectedSegmentIndex)
        }}
      />
    </div>
  )
}
export default class Playground extends Component {
  render() {
    return (
      <div className={`rt-playground-container`}>
        <h1>HI Title</h1>
        {/*<Carousel className={`rt-tiy-box`}>
          <h2>This is 111 the h2 title</h2>
          <h2>This is 222 the h2 title</h2>
          <h2>This is 333 the h2 title</h2>
          <h2>This is 444 the h2 title</h2>
        </Carousel>*/}
      </div>
    )
  }
}